<template>
    <div class="home">
        <h3>gsap 实际应用<span style="font-size: 14px;"> 滚轮放入地图滚动查看效果</span></h3>
        <br />
        <div class="center-map">
            <template v-if="iconShow">
                <img :src="yingchuan" class="yingchuan" />
                <img :src="shangbiao" class="shangbiao" />
                <img :src="tangjing" class="tangjing" />
            </template>
            <div class="map-box">
                <Echarts :options="options" />
            </div>


            <div class="map-box">
                <div class="icon-box">
                    <template v-for="(item, index) in list" :key="index">
                        <div :style="{ color: item.color }" class="single">
                            <span>{{ item.name }}</span>
                            <img :src="item.icon" style="width:70px;height:60px" />
                            <div class="single-desc">
                                <span>{{ item.label_c }}</span>
                                <img :src="item.icon_c" style="width:30px;height:30px" />
                            </div>
                            <div class="single-desc">
                                <span>{{ item.label_t }}</span>
                                <img :src="item.icon_t" style="width:30px;height:30px" />
                            </div>
                        </div>
                    </template>
                </div>
                <!-- 下方地图数据 -->
                <Echarts :options="bottomMapOptions" :needListen="true" />
            </div>
        </div>
    </div>
</template>

<script setup>
import Echarts from "@/components/Echarts/index.vue";
import useMap from "./hooks/useMap";
import useMapBottom from "./hooks/useMapBottom";
import { onMounted, ref } from "vue";
const { options: bottomMapOptions, setOptions: setBottomOptions } = useMapBottom();
const { options } = useMap();

// gsap 以及scrolltrigger 库导入
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

// 图片导入
import yingchuan from "./map/imgs/yingchuan.png";
import shangbiao from "./map/imgs/shangbiao.png";
import tangjing from "./map/imgs/tangjing.png";
import light_station from "./map/imgs/light_station.png";
import light_station_c from "./map/imgs/light_station_c.png";
import light_station_t from "./map/imgs/light_station_t.png";
import water_station from "./map/imgs/water_station.png";
import water_station_c from "./map/imgs/water_station_c.png";
import water_station_t from "./map/imgs/water_station_t.png";
import charge_station from "./map/imgs/charge_station.png";
import charge_station_c from "./map/imgs/charge_station_c.png";
import charge_station_t from "./map/imgs/charge_station_t.png";

const iconShow = ref(true);
const initScrollTrgger = () => {
    gsap.to(".yingchuan", {
        duration: 1,
        top: "-100px",
        opacity: 0,
        scrollTrigger: {
            trigger: ".yingchuan",
            scroller: ".center-map",
            start: "top 0%",
            end: "top 0%",
            toggleActions: "play none none reverse",
            markers: true,
        },
    });
    gsap.to(".shangbiao", {
        duration: 1,
        top: "-100px",
        opacity: 0,
        scrollTrigger: {
            trigger: ".shangbiao",
            scroller: ".center-map",
            start: "top 24%",
            end: "top 24%",
            toggleActions: "play none none reverse",
            // markers: true,
        },
    });
    gsap.to(".tangjing", {
        duration: 1,
        top: "-100px",
        opacity: 0,
        scrollTrigger: {
            trigger: ".tangjing",
            scroller: ".center-map",
            start: "top 6%",
            end: "top 6%",
            toggleActions: "play none none reverse",
            // markers: true,
        },
    });

    gsap.from(".single", {
        x: -100,
        opacity: 0,
        duration: 0.6,
        stagger: 0.2,
        scrollTrigger: {
            trigger: ".single",
            scroller: ".center-map",
            start: "top 30%",
            end: "top 30%",
            toggleActions: "play none none reverse",
            // markers: true,
        },
    });

};
const list = [
    {
        name: "水电站",
        icon: water_station,
        label_c: "经流式",
        label_t: "库容式",
        icon_c: water_station_c,
        icon_t: water_station_t,
        color: "#09E2F8",
    },
    {
        name: "光伏站",
        icon: light_station,
        label_c: "集中式",
        label_t: "分布式",
        icon_c: light_station_c,
        icon_t: light_station_t,
        color: "#FFA06C",
    },
    {
        name: "充电站",
        icon: charge_station,
        label_c: "集中式",
        label_t: "分布式",
        icon_c: charge_station_c,
        icon_t: charge_station_t,
        color: "#3D7FFF",
    },
];

onMounted(() => {
    setBottomOptions();
    initScrollTrgger();
})
</script>

<style lang="scss" scoped>
@mixin scroll_diy($width: 10px, $color: #3f73e3) {
    &::-webkit-scrollbar {
        width: $width;
        height: $width;
    }

    &::-webkit-scrollbar-corner {
        display: none;
    }

    &::-webkit-scrollbar-track {
        width: $width;
        background: rgba($color, 0.2);
        // -webkit-border-radius: 2em;
        // -moz-border-radius: 2em;
        // border-radius: 2em;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba($color, 0.4);
        background-clip: padding-box;
        min-height: 28px;
        // -webkit-border-radius: 2em;
        // -moz-border-radius: 2em;
        // border-radius: 2em;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba($color, 0.7);
    }
}

.home {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    // @include flex();
    // span{
    //     transform: translateY(-100px);
    //     font-size: 20px;
    // }
    .center-map {
        width: 600px;
        height: 600px;
        background-color: #0f111a;
        overflow-y: auto;
        @include scroll_diy(0, transparent);
        overflow-x: hidden;
        align-items: center;
        position: relative;

        .yingchuan {
            width: 80px;
            position: absolute;
            left: 70px;
            top: 60px;
            z-index: 2;
        }

        .shangbiao {
            width: 240px;
            position: absolute;
            left: 327px;
            top: 266px;
            z-index: 2;
        }

        .tangjing {
            width: 245px;
            position: absolute;
            left: 345px;
            top: 131px;
            z-index: 2;
        }

        .map-box {
            width: 600px;
            height: 600px;
            position: relative;

            .icon-box {
                position: absolute;
                left: 20px;
                top: 20px;
                display: flex;
                width: 100%;
                font-size: 12px;

                .single {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 20px;

                    .single-desc {
                        display: flex;
                        align-items: center;
                    }
                }

            }
        }
    }


}
</style>